<template>
	<view class="volunteerProfile">
        <SRV-topbar :title="pageTitle" :isLeft="true"></SRV-topbar>
		<form :report-submit="true">
			<view class="formlist">
				<!-- <view class="title">
					<uni-icons type="compose" size="22" color="#00aa00" />
					<text>{{info.title}}</text>
				</view> -->
				<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" positionItem="fixed" fixed="true"
					:blob="false" :maxWidth="400" :maxHeight="400"></kps-image-cutter>
				<view class="line" v-if="parentInfo.isShow ">
					<view class="right">
						<uni-icons type="star-filled" size="12" color="#ffcc00" style="margin: 0 5px 5px 0" />
						邀请人
					</view>
					<view class="noinput">
						<text :class="'role'+parentInfo.role">{{ parentInfo.roleName }}</text>
						<text>{{ parentInfo.realname }}</text>
					</view>
				</view>
				<view class="line" v-if="parentInfo.payMoney > 0 ">
					<view class="right">
						<uni-icons type="star-filled" size="12" color="#ffcc00" style="margin: 0 5px 5px 0" />
						申请费用
					</view>
					<view class="noinput">
						<text style="color: #E91E63;">￥ {{ parentInfo.payMoney }}</text>
					</view>
				</view>
				<view v-for="(item, keyOne) in info.formData" :key="keyOne" v-if="checkShow(item)">
					<view :class="item.type == 'upload_img' || item.type == 'upload_imgs' || item.type == 'upload_img_cat' ? 'photo' : (item.type == 'textarea' ? 'speciality' : (item.type == 'radio' || item.type == 'radio2' || item.type == 'checkbox' ? 'downItem' : '') + ' line')">
						<!-- 字段名称及必填显示 -->
						<view class="right">
							<uni-icons v-if="item.isRequired == 1" type="star-filled" size="12" color="#C00" style="margin: 0 5px 5px 0" />
							{{item.name}}
						</view>

						<!-- 图片用的样式和其它分开 -->
						<view :class="item.type == 'upload_img' || item.type == 'upload_imgs' || item.type == 'upload_img_cat' ? 'list' : 'right' ">

							<!-- 下拉框组件 -->
							<picker v-if="item.type == 'select'" @change="bindPickerChange" :value="item.showVal"
								:range="item.valList" range-key="itemName" :data-current="item.valField" :data-key="index">
								<view class="item">{{item.nowValName}}</view>
							</picker>

							<!-- 文本框组件 -->
							<text v-if="item.valField == 'spread_title'" style="padding-right: 10rpx;">超圳</text>
							<input v-if="item.type == 'input'" type="text" v-model="formData.valItem[item.valField]"
								placeholder-style="color:rgba(153,153,153,0.9);" placeholder="请输入..." />
							<input v-if="item.type == 'input2'" type="text" v-model="formData.valItem[item.valField]"
								placeholder-style="color:rgba(153,153,153,0.9);" placeholder="请输入..." disabled="disabled"/>
							<text v-if="item.valField == 'spread_title'" style="padding-left: 10rpx;">商行</text>
							<!-- 日期组件 -->
							<picker v-if="item.type == 'date'" mode="date" :value="item.showVal" @change="bindDateChange"
								:data-current="item.valField" :data-key="keyOne">
								<view class="item">{{item.nowValName}}</view>
							</picker>

							<!-- 向右箭头 -->
							<view v-if="item.type == 'select' || item.type == 'date'" class="jt" :style="item.type=='date' ? 'top: 62upx;' : ''"></view>


							<!-- 单图组件 -->
							<view style="position:relative;" v-if="item.type == 'upload_img' || item.type == 'upload_img_cat'">
								<image :src="item.nowValName != '' ? item.nowValName : 'https://hdsq.aoorange.cn/attachment/xcx/icon/addphoto.png'" mode="aspectFill" @click="chooseImage(keyOne)"></image>
								<image @click="delImg(keyOne)" v-if="item.nowValName != ''" src="https://hdsq.aoorange.cn/attachment/xcx/icon/del-new.png" class="del" mode="aspectFill"></image>
							</view>

							<!-- 多图组件 -->
							<view class="photos" v-if="item.type == 'upload_imgs'">
								<view class="photo_list" v-for="(item2,index2) in item.valList" :key="index2">
									<image :src="item2.thumbUrl" mode="aspectFill" @tap="previewImageFun"
										:data-src="item2.imgUrl" :data-id="keyOne"></image>
									<image @click="delImg(keyOne, index2)"
										src="https://app.chinasrv.com/attachment/xcx/icon/del-new.png" class="del"
										mode="aspectFill"></image>
								</view>
								<image src="https://app.chinasrv.com/attachment/xcx/icon/addphoto.png" mode="aspectFill"
									@click="chooseImage(keyOne)"></image>
							</view>
							<!-- 地图组件 -->
							<view class="" v-if="item.type == 'map'" style="display: flex;">
								<uni-icons type="location-filled" size="24" color="#C00" style="margin: 0 0 0 5px" />
								<view class="bottom1" @click="getMapLocation(keyOne)">{{item.nowVal.latitude == '' ? '选择定位' : '重新选择定位'}}</view>
							</view>
							<!-- 文本 固定值 -->
							<view v-if="item.type == 'text'">{{item.nowValName}}</view>
							<!-- 时间选择 时分 -->
							<view v-if="item.type == 'date-hi'" style="display: flex;width: 280rpx;justify-content: space-between;">
								<picker v-for="(dh,index2) in item.nowVal" class="selPicker" mode="time" :value="dh" start="00:00" end="23:59" @change="bindTimeChange" :data-key="keyOne" :data-ii="index2">
									<view class="uni-input">{{dh}}</view>
								</picker>
							</view>
						</view>
						
						<!-- 单选框和多选框 -->
						<div v-if="item.type == 'checkbox' || item.type == 'radio'" class="A"
							v-for="(optionItem,index2) in item.valList" :key="index2">
							<p @click="selAnswerFun(item.type, keyOne, optionItem.itemId)">
								<i :class="(isCheck(item.type, keyOne, optionItem.itemId) ? 'check ' : '') + item.type"></i>
								<span>{{optionItem.itemName}}</span>
							</p>
							<p style="padding-left: 60rpx;color: #999999;" v-if="optionItem.remark != ''">{{optionItem.remark}}</p>
						</div>
						
						<div class="A2-box" v-if="item.type == 'checkbox2' || item.type == 'radio2'">
							<div class="A2" v-for="(optionItem,index2) in item.valList" :key="index2">
								<p @click="selAnswerFun(item.type, keyOne, optionItem.itemId)">
									<i :class="(isCheck(item.type, keyOne, optionItem.itemId) ? 'check ' : '') + item.type"></i>
									<span>{{optionItem.itemName}}</span>
								</p>
								<p style="padding-left: 60rpx;color: #999999;" v-if="optionItem.remark != ''">{{optionItem.remark}}</p>
							</div>
						</div>
						

						<!-- 多行文本 -->
						<textarea maxlength="1000" v-if="item.type == 'textarea'" v-model="formData.valItem[item.valField]"
							placeholder="请输入..." />
					</view>
					<view class="line" v-if="item.type == 'map'" style="height: 200rpx;">
						<textarea class="textarea" v-model="item.nowVal.address" value="" placeholder=" 请填写详细地址，不少于5个字" />
					</view>
				</view>
			</view>
			<view class="heng"></view>
			<!-- <view class="deal" v-if="info.agreement">
				<view :class="isclick?'sel':'nosel'" @click="isclick = !isclick"></view>
				<text @click="isclick = !isclick">已阅读，并同意</text>
				<text @click="jump('agreement', info.agreement.type)">《{{info.agreement.name}}》</text>
			</view> -->
			<!-- 表单内容循环结束 -->
			<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'" @click="operateFormData()">确认</view>
			<uni-popup ref="showPayView" type="bottom">
				<view class="pay_type">
					<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
					<view class="title">选择支付方式</view>
					<view class="paypir">
						<text>开通费用</text>
						<text>￥{{pay_money}}</text>
					</view>
                    <view class="line2"  v-if="payInfo.use_hdq > 0"  @click="setUseOther(1)">
                    	<text>使用互动券 {{payInfo.use_hdq}} 抵扣金额 ￥{{payInfo.use_hdq}}</text>
                    	<view :class="payData.is_use_hdq == 1 ?'check':'nocheck'"></view>
                    </view>
					<view class="line2"  v-if="pay_money > 0" @click="selPayType(5)">
						<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
						<view :class="payData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(payInfo.user_money) >= Number(pay_money)"></view>
						<text v-else @click="jump('on_line_recharge')">余额不足</text>
					</view>
					<view class="line2" v-if="pay_money > 0"  @click="selPayType(1)">
						<text>在线微信支付</text>
						<view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
					</view>
					<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPayForm()">确认支付</view>
				</view>
			</uni-popup>
		</form>
	</view>
</template>

<script>
	var _self = this;
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	import commonPay from '../../static/commonPay.js';
	export default {
		data() {
			return {
				id: 0,
				info: {},
				pageTitle: '',
				parentInfo: {isShow: false},
				formInput: [],
				redioList: [],
				addressList: [],
				checkboxList: [
					[]
				],
				imgList: [],
				formData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					applyType: '',
					parentKey: '',
					valItem: {},
				},
				payData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					pay_type: '',
					pay_id: 0,
					is_use_hdq: 0,
					payment_type: 1,
				},
				payInfo: [],
				pay_money: 0,
				url: "",
				dataId: 0,
				isSub: true,
				isPay: true,
				isLoad: false,
				isclick: false,
				bottomHeight: 110,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		components: {
			behaviors: ['wx://form-field'],
			kpsImageCutter
		},
		methods: {
            getMapLocation(key){
            	_self.isLoad = true;
                let item = _self.info.formData[key];
                let nowLongitude = item.nowVal.longitude;
                let nowLatitude = item.nowVal.latitude;
            	uni.chooseLocation({
            		'longitude': nowLongitude,
            		'latitude': nowLatitude,
            		success:(res)=> {
            			item.nowVal.longitude = res.longitude;
            			item.nowVal.latitude = res.latitude;
            			item.nowVal.address = res.name;
            			_self.$forceUpdate();
            			// this.getRegionFn(res);
            		},
            		fail:()=>{
            			// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
            			uni.getSetting({
            				success: (res) => {
            					var status = res.authSetting;
            					if(!status['scope.userLocation']){
            					// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
            						uni.showModal({
            							title:"是否授权当前位置",
            							content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
            							success:(tip)=>{
            								if(tip.confirm){
            								// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
            									uni.openSetting({
            										success:(data)=>{
            										// 如果用户授权了地理信息在，则提示授权成功
            											if(data.authSetting['scope.userLocation']===true){
            												uni.showToast({
            													title:"授权成功",
            													icon:"success",
            													duration:1000
            												})
            												// 授权成功后，然后再次chooseLocation获取信息
            												uni.chooseLocation({
            													success: (res) => {
            														console.log("详细地址",res);
            														// this.getRegionFn(res);
            													}
            												})
            											}else{
            												uni.showToast({
            													title:"授权失败",
            													icon:"none",
            													duration:1000
            												})
            											}
            										}
            									})
            								}
            							}
            						})
            					}
            				},
            				fail: (res) => {
            					uni.showToast({
            						title:"调用授权窗口失败",
            						icon:"none",
            						duration:1000
            					})
            				}
            			})
            		}
            	});
            },
			getInfo() {
				serve.request({
					url: '/store/open/apply-form',
					data: _self.formData,
                    v: '/v2'
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function() {
									common.jump('return_one')
								}, 2000)
							}
						});
					}
                    _self.isLoad = true;
					_self.info = res.data;
					_self.pageTitle = res.data.pageTitle;
					_self.parentInfo = res.data.parentInfo;
					_self.info.formData.forEach((item, key) => {
						_self.$set(_self.formData.valItem, item.valField, item.nowVal);
						if ((item.type == 'select')) {
							if (item.nowVal > 0) {
								item.valList.forEach((valItem, valKey) => {
									if (valItem.itemId == item.nowVal) {
										_self.$set(_self.info.formData[key], 'showVal', valKey);
									}
								});
							} else {
								_self.$set(_self.info.formData[key], 'showVal', '');
							}
						} else if (item.type == 'radio' || item.type == 'radio2') {
							_self.redioList[key] = item.nowVal;
						} else if (item.type == 'checkbox') {
							_self.checkboxList[key] = [];
							let selCheck = item.nowVal ? item.nowVal.split(";") : [];
							item.valList.forEach((optionItem, key2) => {
								_self.checkboxList[key][optionItem.itemId] = selCheck.indexOf(
									optionItem.itemId) === -1 ? false : true;
							});
						} else if (item.type == 'address') {
							let addressInfo = item.nowValName ? item.nowValName.split("==") : [];
							_self.$set(item, 'nowVal', 0);
							if (addressInfo.length > 0) {
								_self.$set(item, 'nowVal', addressInfo[0]);
								_self.addressList[key] = {
									realname: addressInfo[1],
									mobile: addressInfo[2],
									address_name: addressInfo[3],
									address_details: addressInfo[4]
								};
							}
						} else if (item.type == 'upload_imgs') {
							_self.imgList[key] = [];
							if(item.valList.length > 0) {
								item.valList.forEach((it, ik) => {
									 _self.imgList[key].push(it.imgUrl);
								});
							}
						}
					});
				});
			},
			checkShow(item) {
				if(item.checkIf == '') {
					return true;
				}
				let ifVal = item.checkIf;
				
				if(_self.formData.valItem[ifVal] == item.checkVal) {
					return true;
				}
				return false;
			},
			isCheck(type, index, index2) {
				if (type == 'radio' || type == 'radio2') {
					return _self.redioList[index] == index2;
				} else if (type == 'checkbox') {
					return _self.checkboxList[index][index2];
				}
				return false;
			},
			selAnswerFun(type, k, k1) {
				if (type == 'radio' || type == 'radio2') {
					let mainItem = _self.info.formData[k];
					let radioInfo = mainItem.valList;
					let isSatisfy = true;
					radioInfo.forEach((item, key) => {
						if (item.itemId == k1 && item.state == 0) {
							uni.showModal({
								title: '提示',
								content: item.message,
								showCancel: false,
							});
							isSatisfy = false;
							return false;
						}
					});
					if (!isSatisfy) {
						return false;
					}
					_self.redioList[k] = k1;
					_self.$set(_self.formData.valItem, mainItem.valField, k1);
				} else {
					_self.checkboxList[k][k1] = !_self.checkboxList[k][k1];
				}
				_self.$forceUpdate();
			},
			bindPickerChange: function(e) {
				let key = e.target.dataset.key;
				let curindex = e.target.dataset.current;
				let value = e.target.value;
				let valList = _self.info.formData[key].valList;

				for (let k in valList) {
					if (k == value) {
						_self.$set(_self.formData.valItem, curindex, valList[k].itemId);
						_self.info.formData[key].nowValName = valList[k].itemName;
						return;
					}
				}
				_self.$forceUpdate();
			},
			bindDateChange: function(e) {
				let dateVal = e.target.value;
				let key = e.target.dataset.key;
				let item = _self.info.formData[key];
				_self.$set(_self.formData.valItem, item.valField, dateVal);
				item.nowVal = dateVal;
				item.nowValName = dateVal;
				_self.$forceUpdate();
			},
			bindTimeChange: function(e){
				let dateVal = e.target.value;
				let ii = e.target.dataset.ii;
				let key = e.target.dataset.key;
				let item = _self.info.formData[key];
				// _self.$set(_self.formData.valItem, item.valField[ii], dateVal);
				item.nowVal[ii] = dateVal;
				_self.$forceUpdate();
			},
			chooseImage(key) {
				let item = _self.info.formData[key];
				let surplusNum = 1;
				if (item.type == 'upload_imgs') {
					if(item.valList.length >= item.num) {
						return ;
					}
					surplusNum = item.num - item.valList.length;
				}
				if(item.type == 'upload_img_cat') {
					_self.dataId = key;
				}
				uni.chooseImage({
			        count: surplusNum,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFiles;
						tempFilePaths.forEach((file, kk) => {
						    const maxSize = 10 * 1024 * 1024;
						    // console.info("file.size = " + file.size);
						    if (file.size > maxSize) {
						        uni.showToast({
						            icon: "none",
						            title: "文件不能大于10兆",
						            mask: true,
						            duration: 1.5e3
						        });
						        return;
						    } else {
								if (item.type == 'upload_imgs') {
									let temp = {
										thumbUrl: file.path,
										imgUrl: file.path,
										isUpload: 0,
										imgPath: ''
									};
									item.valList.push(temp);
									_self.imgList[key] = [];
									item.valList.forEach((it, kt) => {
										_self.imgList[key].push(it.imgUrl);
									});
								} else if (item.type == 'upload_img') {
									item.nowVal = '';
									item.nowValName = file.path;
									return ;
								} else {
									_self.url = file.path;
								}
						    }
						});
						_self.$forceUpdate();
					}
				});
			},
			onok(ev) {
				let item = _self.info.formData[_self.dataId];
				item.nowVal = '';
				item.nowValName = ev.path;
				_self.url = '';
				_self.dataId = '';
				_self.$forceUpdate();
			},
			async uploadFileFun(file) {
			    let accessToken = uni.getStorageSync('access-token');
			    let appkey = uni.getStorageSync('appkey');
			    return new Promise((resolve, reject) => {
			        uni.uploadFile({
			            url: serve.apiUrl() + '/v1/file/images?appkey=' + appkey +
			                '&access-token=' + accessToken,
			            filePath: file,
			            name: 'file',
			            formData: {},
			            success: (uploadFileRes) => {
			                let result = JSON.parse(uploadFileRes.data);
			                console.info(result);
			                if (result.code == 200) {
			                    resolve(result.data.imgPath);
			                } else {
			                    resolve(false);
			                }
			            }
			        });
			    });
			},
			previewImageFun: function(e) {
			    var current = e.target.dataset.src;
			    var key = e.target.dataset.id;
			    uni.previewImage({
			        current: current,
			        urls: _self.imgList[key]
			    });
			    return;
			},
			delImg(key, key2) {
				let item = _self.info.formData[key];
				if (item.type == 'upload_imgs') {
					item.valList.splice(key2, 1);
					_self.imgList[key] = [];
					item.valList.forEach((it, kt) => {
						_self.imgList[key].push(it.imgUrl);
					});
				} else {
					item.nowVal = '';
					item.nowValName = '';
				}
				_self.$forceUpdate();
			},
			async operateFormData() {
				if(_self.payInfo && _self.payInfo.money > 0) {
					uni.hideLoading();
					_self.$refs.showPayView.open();
					return ;
				}
				uni.showLoading({
				    title: '提交中···',
				    mask: true
				});
				var checksub = true;
				for (let kkk in _self.info.formData) {
					let item = _self.info.formData[kkk];
					if (item.type == 'upload_imgs') {
						let imgTemp = [];
						if(item.valList.length > 0){
							for(let kt in item.valList) {
								let it = item.valList[kt];
								if(it.isUpload == 0) {
									let uresult = await _self.uploadFileFun(it.imgUrl);
									if (!uresult) {
										uni.hideLoading();
									    uni.showToast({
									        title: item.name + "第" + (Number(kt) + Number(1)) +"张图片上传失败",
									        icon: 'none'
									    });
									    return;
									}
									it.imgPath = uresult;
									it.isUpload = 1;
								}
								imgTemp.push(it.imgPath);
							}
						}
						_self.formData.valItem[item.valField] = imgTemp;
					} else if (item.type == 'upload_img' || item.type == 'upload_img_cat') {
						if(item.nowVal == '' && item.nowValName != '') {
							let uresult = await _self.uploadFileFun(item.nowValName);
							if (!uresult) {
								uni.hideLoading();
							    uni.showToast({
							        title: item.name + "图片上传失败",
							        icon: 'none'
							    });
							    return;
							}
							item.nowVal = uresult;
						}
						_self.formData.valItem[item.valField] = item.nowVal;
					} else if (item.type == 'radio' || item.type == 'radio2') {
						_self.formData.valItem[item.valField] = _self.redioList[kkk];
					} else if (item.type == 'checkbox') {
						let checkboxAnswer = '';
						let is_check = false;
						item.valList.forEach((optionItem, key2) => {
							if (_self.checkboxList[kkk][optionItem.itemId]) {
								checkboxAnswer += (is_check ? ';' : '') + optionItem.itemId;
								is_check = true;
							}
						});
						_self.formData.valItem[item.valField] = checkboxAnswer;
                    } else if (item.type == 'map') {
						if(item.isRequired == 1) {
							if(item.nowVal.latitude == '' || item.nowVal.longitude == '') {
								uni.showToast({
									title: item.name + "选择地图定位",
									icon: 'none',
								});
								checksub = false;
								return;
							}
							if(item.nowVal.address == '') {
								uni.showToast({
									title: item.name + "填写详细地址",
									icon: 'none',
								});
								checksub = false;
								return;
							}
						}
                        _self.formData.valItem[item.valField] = item.nowVal;
					}
					if (item.isRequired == 1 && _self.formData.valItem[item.valField] == "") {
						if(item.checkIf == '' || _self.formData.valItem[item.checkIf] == item.checkVal){
							uni.showToast({
								title: item.name + "不能为空",
								icon: 'none',
							});
							checksub = false;
							return;
						}
					}
				}
				if (checksub == false) {
					return;
				}
				_self.subForm();
			},
			subForm() {
				if(_self.isSub == false) {
					return ;
				}
				uni.showLoading({
				    title: '提交中···',
				    mask: true
				});
				_self.isSub = false;
				serve.request({
					url: '/store/open/apply',
					data: _self.formData,
                    v: '/v2'
				}, 'POST').then(res => {
					uni.hideLoading();
					_self.isSub = true;
					if(res.code != 200){
						uni.showToast({
							title: res.message,
							icon: 'none',
						});
						return ;
					}
					_self.payInfo = res.data;
					if(_self.payInfo.isPay) {
						_self.payData.pay_type = _self.payInfo.pay_type;
						_self.payData.pay_id = _self.payInfo.pay_id;
						_self.calculationTotalMoney();
						_self.$refs.showPayView.open();
						return ;
					}
                    uni.showModal({
                    	title: '温馨提示',
                    	content: res.data.message,
                        showCancel:false,
                    	success: function(res) {
                    		if (res.confirm) {
                    			uni.redirectTo({
                    				url: _self.payInfo.jumpFile
                    			});
                    		}
                    	}
                    });
                    return ;
				});
			},
			subPayForm() {
                commonPay.payFun(_self.payData, _self.payInfo.jumpFile);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			setUseOther(type) {
				if(type == 1) {
					_self.payData.is_use_hdq = _self.payData.is_use_hdq == 1 ? 0 : 1;
				} 
				_self.calculationTotalMoney();
			},
			selPayType(payType) {
				if(payType == 5 && Number(_self.payInfo.user_money) < Number(_self.pay_money)) {
					return ;
				}
				_self.payData.payment_type = payType;
			},
			calculationTotalMoney(){
				_self.pay_money = JSON.parse(JSON.stringify(_self.payInfo.money));
				if(_self.payInfo.use_hdq > 0) {
					if(_self.payData.is_use_hdq) {
						_self.pay_money = Number(_self.pay_money) - Number(_self.payInfo.use_hdq);
					}
				}
				_self.$forceUpdate();
			},
			close() {
				_self.$refs.showPayView.close();
			},
			jump(jumpType, jumpVal) {
				common.jump(jumpType, jumpVal);
			}
		},
		onLoad(options) {
			_self = this;
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 178;
			}
            _self.formData.parentKey = options.parentKey || '';
            if (_self.formData.parentKey) {
                uni.setStorageSync('parentKey', _self.formData.parentKey);
            } else {
                _self.formData.parentKey = uni.getStorageSync('parentKey');
            }
			_self.formData.applyType = options.applyType;
		},
		onShow() {
            this.formData['access-token'] = uni.getStorageSync('access-token');
			if (this.isLoad == false) {
				this.getInfo();
			}
		}
	}
</script>

<style scoped lang="scss">
	.volunteerProfile {
		padding-bottom: 178upx;

		.bottom {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 32upx;
			color: rgba(255, 255, 255, 1);
			background: rgba(251, 202, 63, 1);
			bottom: 0upx;
			position: fixed;
			z-index: 9;
		}

		.formlist {
			margin: 20upx 30upx 20px 30upx;
			background-color: #ffffee;
			border: 1upx #cccccc solid;
			border-radius: 20upx;
			color: #333;

			.title {
				position: relative;
				padding: 30upx 0 0 30upx;
				height: 80upx;
				border-bottom: 1upx #cccccc solid;

				.statusname {
					margin-left: 20upx;
					font-size: 22upx;
					color: 666;
				}

				text {
					margin-left: 20upx;
					font-size: 32upx;
					font-weight: bold;
				}
			}

			.remark {
				position: relative;
				margin: 20upx 40upx;
				padding: 20upx;
				min-height: 60upx;
				border: 1upx #ffcc00 dotted;
				border-radius: 15upx;
				background-color: #feffbd;
				color: #af5b5b;
				display: flex;
				flex-direction: column;


				.retitle {
					line-height: 40upx;
					font-size: 28upx;
					font-weight: bold;
					padding: 10upx 0upx;
				}

				.retext {
					margin-left: 60upx;
					line-height: 40upx;
					font-size: 26upx;
					padding: 10upx 0upx;
				}

			}


			.speciality {
				padding: 42upx 30upx 25upx;
				box-sizing: border-box;
				font-size: 32upx;
				color: rgba(153, 153, 153, 0.9);

				textarea {
					padding: 33upx 38upx;
					background: rgba(232, 232, 232, 0.2);
					border-radius: 12px;
					font-size: 32upx;
					// color:rgba(66,81,114,0.2);
					height: 240upx;
				}

				.required {
					color: #f00;
				}

				.right {
					margin-top: 20upx;
				}
			}

			.photo {
				padding: 44upx 30upx;
				box-sizing: border-box;
				border-bottom: 1upx rgba(235, 235, 235, 1) solid;

				.title {
					font-size: 32upx;
					color: rgba(153, 153, 153, 1);
				}

				.list {
					display: flex;
					flex-wrap: wrap;

					image {
						margin-top: 40upx;
						margin-right: 20upx;
						width: 200upx;
						height: 200upx;
					}

					.del {
						width: 48upx !important;
						position: absolute;
						height: 48upx !important;
						top: -24upx;
						right: -24upx;
					}

					.photos {
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;

						image {
							width: 200upx;
							height: 200upx;
							border-radius: 10upx;
							margin-bottom: 20upx;
						}

						.photo_list {
							margin-right: 30upx;
							padding-bottom: 20upx;
							display: flex;
							flex-direction: column;
							align-items: flex-end;
							position: relative;

							view {
								color: red;
								font-size: 30upx;
							}

							.del {
								width: 48upx !important;
								position: absolute;
								height: 48upx !important;
								top: -24upx;
								right: -24upx;
							}
						}
					}
				}
			}

			.downItem {
				height: 100% !important;
				display: list-item !important;
				line-height: 80upx !important;
			}

			.line {
				min-height: 130rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0upx 30upx;
				color: #fff;

				font-size: 32upx;
				border-bottom: 1upx rgba(235, 235, 235, 1) solid;

				.required {
					color: #f00;
				}
				
				.selPicker{
					padding: 0 10rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					letter-spacing: 5rpx;
					width: 100rpx;
					border-radius: 20rpx;
					background: #EAEBEF;
					color: #000;
					font-size: 28rpx;
				}
				
				.right {
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;
					color: #999;

					.item {
						margin-right: 30upx;
					}

					input {
						text-align: right;
						border-radius: 36upx;
						background-color: #EAEBEF;
						color: #000;
						padding: 0upx 20upx;
						height: 72upx;
						font-size: 26upx;
					}

					.jt {
						position: absolute;
						right: 0upx;
						content: '';
						border: 1upx solid rgba(57, 72, 107, 0.5);
						border-width: 0 3upx 3upx 0;
						padding: 6upx;
						transform: rotate(-45deg);
						-webkit-transform: rotate(-45deg);
					}
				}
				.noinput{
						width: 300upx; 
						color: #666;
						text-align: right;
						border-radius: 36upx;
						padding: 0upx 20upx;
						height: 72upx;
						font-size: 26upx;
						line-height: 62upx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						
						.role30, .role50 {
							padding: 0 10rpx;
							border-radius: 10rpx;
							color: #fff;
							background-color: blue;
						}
						.role40, .role60 {
							padding: 0 10rpx;
							border-radius: 10rpx;
							color: #fff;
							background-color: #E91E63;
						}
						text{
							margin-left: 10upx;
							margin-top: 10upx;
						}
					}
				.A {
					height: 120rpx;
					box-sizing: border-box;
					padding: 0upx 30upx;
					color: rgba(153, 153, 153, 0.9);
					font-size: 32upx;

					p {
						display: flex;
						align-items: center;
						line-height: 48upx;
						font-size: 32upx;
						color: rgba(60, 72, 104, 1);
						margin-bottom: 10upx;

						.radio {
							display: block;
							width: 48upx;
							height: 48upx;
							border: 1px solid rgba(57, 72, 107, 1);
							border-radius: 50%;
							box-sizing: border-box;
							margin-right: 10upx;
						}

						.checkbox {
							width: 40upx;
							height: 40upx;
							line-height: 60upx;
							text-align: center;
							margin: 0 10upx;
							border: 2upx solid #888;
							color: #999;
							font-size: 28upx;
						}

						.radio.check {
							border: none;
							background: url(http://app.chinasrv.com/attachment/xcx/my/check.png);
							background-size: 100% auto;
						}

						.checkbox.check {
							border: none;
							background: url(http://app.chinasrv.com/attachment/xcx/my/checkbox_check.png);
							background-size: 100% auto;
						}
					}
				}
				.A2-box{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: flex-start;
					.A2 {
						box-sizing: border-box;
						padding: 8rpx 0rpx;
						color: rgba(153, 153, 153, 0.9);
						font-size: 32rpx;
                        width: 33%;
						p {
							display: flex;
							align-items: center;
							line-height: 48upx;
							font-size: 32upx;
							color: rgba(60, 72, 104, 1);
							margin-bottom: 10upx;
					
							.radio2 {
								display: block;
								width: 48upx;
								height: 48upx;
								border: 1px solid rgba(57, 72, 107, 1);
								border-radius: 50%;
								box-sizing: border-box;
								margin-right: 10upx;
							}
					
							.checkbox2 {
								width: 40upx;
								height: 40upx;
								line-height: 60upx;
								text-align: center;
								margin: 0 10upx;
								border: 2upx solid #888;
								color: #999;
								font-size: 28upx;
							}
					
							.radio2.check {
								border: none;
								background: url(http://app.chinasrv.com/attachment/xcx/my/check.png);
								background-size: 100% auto;
							}
					
							.checkbox2.check {
								border: none;
								background: url(http://app.chinasrv.com/attachment/xcx/my/checkbox_check.png);
								background-size: 100% auto;
							}
						}
					}
				}
				
			}
		}


		.addressview {
			position: relative;

			//border: 2upx #0000ff dashed;
			//border-bottom: 16upx rgba(251, 251, 253, 1) solid;
			.noaddress {
				height: 190upx;
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				//border: 2upx #ffdd00 dashed;
				image {
					width: 40upx;
				}

				text {
					width: 100%;
					font-size: 32upx;
					font-weight: bold;
					color: #999;
					margin-left: 10upx;
				}
			}

			.address {
				display: flex;
				flex-direction: row;
				position: relative;
				padding: 0upx 20upx 50upx 60upx;
				font-size: 28upx;
				font-weight: bold;
				align-items: center;



				image {
					position: absolute;
					left: 0;
					width: 31upx;
					height: 37upx;
					top: 80upx;
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					width: 100%;
					margin-right: 10upx;

					//border: 2upx #ff0000 dashed;
					.txt {
						//border: 2upx #aa55ff dashed;
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						text {
							//border: 2upx #00aa00 dashed;
						}
					}

					.txt1 {
						//border: 2upx #ffaa7f dashed;
						font-weight: normal;
						line-height: 40upx;
						font-size: 26upx;
					}
				}


				.jt {
					position: absolute;
					right: 0;
					top: 105;
					border: 1upx solid rgba(57, 72, 107, 0.5);
					border-width: 0 3upx 3upx 0;
					padding: 6upx;
					transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
				}
			}

			.img {
				position: absolute;
				bottom: 0;
				height: 10upx;
				width: 100%;
			}
		}
		
		.deal{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			padding: 55upx 0upx;
			text:nth-child(2){
				color: #999999;
				margin-left: 11upx;
			}
			text:nth-child(3){
				color: #EB5938;
				margin-left: 11upx;
			}
			.sel {
				background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/icon37.png);
				background-repeat: no-repeat;
				width:30upx;
				height:30upx;
				background-size: 100%;
				margin-right: 20upx;
			}
			
			.nosel {
				width: 30upx;
				height: 30upx;
				border: 1upx solid #999999;
				border-radius: 50%;
				margin-right: 20upx;
			}
		}
		.textarea{
			width: 100%;
			height: 130rpx;
			background-color: #EAEBEF;
			padding: 20rpx;
			color: #000;
			border-radius: 20rpx;
		}	
		
		.pay_type {
			position: relative;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 200upx;
			max-height: 80vh;
		
			text {
				font-size: 42rpx;
			}
		
			.close {
				position: absolute;
				width: 50upx;
				height: 50upx;
				right: 40upx;
				top: 30upx;
			}
		
			.title {
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
		
			.paypir {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				// padding: 20upx 0upx 20upx;
				font-size: 28upx;
		
				text:last-child {
					color: #FF5F60;
					font-size: 50upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
		
			.line2 {
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
		
				.txt {
					color: #999999;
				}
		
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
		
				.sel {
					background-image: url(../../static/img/check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				.nocheck {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 20%;
				}
				
				.check {
					background: url(../../static/img/checkbox_check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
			}
		
			.pay_bot {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
				height: 100upx;
				background: #FFBF0A;
				color: #fff;
				font-size: 32upx;
				line-height: 100upx;
				text-align: center;
				border-radius: 0;
		
				&::after {
					border: none;
				}
			}
		}
	}
</style>
